import { useParams } from "react-router-dom";
import { getIssueById } from "../api/issue"
import { useEffect, useState } from "react";
import styles from "../css/IssueDetail.module.scss"
import HeaderList from "../components/HeaderList";
import Recommend from "../components/Recommend";
import ScoreRank from "../components/ScoreRank";
import { getUserById } from "../api/user";
import { IIssueInfo } from "../typings";
import { IUserInfo } from "../typings";
import { formatTimestamp } from "../utils/tools"
import { Avatar } from "antd";
import Disscuss from "../components/Disscuss";

const IssueDetail = () => {
    const params = useParams();
    const id = (params.id as string);
    const [issueInfo, setIssueInfo] = useState<IIssueInfo>();
    const [userInfo, setUserInfo] = useState<IUserInfo>();

    useEffect(() => {
        const fetchData = async () => {
            const issueRes = await getIssueById(id);
            setIssueInfo(issueRes.data.data);
            const userRes = await getUserById(issueRes.data.data.userId)
            setUserInfo(userRes.data.data)
        }
        fetchData()
    }, [])


    return (
        <div className={styles.container}>
            <HeaderList title="问题详情" />
            <div className={styles.detailContainer}>
                {/* 左侧 */}
                <div className={styles.leftSide}>
                    {/* 左上方：问答详情 */}
                    <div className={styles.question}>
                        <h1>{issueInfo?.issueTitle}</h1>
                        {/* 提问人信息：头像，昵称，提问时间 */}
                        <div className={styles.questioner}>
                            <Avatar size="small" src={userInfo?.avatar} />
                            <span className={styles.user}>{userInfo?.nickname}</span>
                            <span>发布于：{formatTimestamp(issueInfo?.issueDate, "YYYY-MM-DD HH:mm:ss DOW")}</span>
                        </div>
                        {/* 问题详情 */}
                        <div className={styles.content}>
                            <div dangerouslySetInnerHTML={{ __html: (issueInfo?.issueContent as string) }}></div>
                        </div>
                    </div>
                    {/* 左下方：评论 */}
                    <Disscuss
                        commentType={1}
                        targetId={issueInfo?._id}
                        issueInfo={issueInfo}
                    />
                </div>
                {/* 右侧 */}
                <div className={styles.rightSide}>
                    <Recommend />
                    <ScoreRank />
                </div>
            </div>
        </div>
    );
}

export default IssueDetail;